<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Start Travel 请登录</title>
  <!--    引入bootstrap.css-->
  <link rel="stylesheet" href="/dev/plugins/bootstrap/css/bootstrap.css">

  <style>
      #login {
          /*border: 1px solid #999;*/
          /*设置外边距*/
          margin-top: 80px;
          /*设置内填充*/
          padding-top: 30px;

          /*边框立体感 - 边框的阴影 */
          box-shadow: 2px -2px 4px #999;

          /*边框的圆润度*/
          border-radius: 8px;
      }

      #email_span {
          /*隐藏*/
          display: none;
      }

  </style>
</head>
<body>

<!-- 导航栏 -->
<div class="container-fluid">
  <div class="row">
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="./index.html">Start Travel</a>
        </div>
      </div>
    </nav>
  </div>
</div>

<!-- 登录 -->
<div class="container" id="login">
  <div class="row">
    <form class="form-horizontal" role="form">
      <div class="form-group has-feedback">
        <label for="email" class="col-sm-2 control-label">邮箱</label>
        <div class="col-md-6">
          <input type="text" class="form-control" id="email" placeholder="请输入邮箱">
          <span class="form-control-feedback glyphicon glyphicon-user"></span>
          <span class="text-danger" id="email_span">sorry,email is not exists</span>
          <!-- <span class="text-danger" id="email_expired">sorry,email has expired</span> -->
        </div>
        <div class="col-md-2">
          <button type="button" class="btn btn-success" onclick="send()">发送验证码</button>
        </div>
      </div>
      <div class="form-group has-feedback">
        <label for="code" class="col-sm-2 control-label">验证码</label>
        <div class="col-md-6">
          <input type="text" class="form-control" id="code" placeholder="请输入验证码">
          <span class="form-control-feedback glyphicon glyphicon-eye-open"></span>
        </div>
      </div>
      <!-- <div class="form-group"> -->
      <!--   <div class="col-sm-offset-2 col-sm-10"> -->
      <!--     <div class="checkbox"> -->
      <!--       <label> -->
      <!--         <input type="checkbox">请记住我 -->
      <!--       </label> -->
      <!--     </div> -->
      <!--   </div> -->
      <!-- </div> -->
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="button" onclick="login()" class="btn btn-default">登录</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!--    必须先引入jquery.min.js,是因为bootstrap.js中依赖于jquery.min.js-->
<script src="/dev/plugins/jquery/jquery.min.js"></script>
<!--    引入bootstrap.js-->
<script src="/dev/plugins/bootstrap/js/bootstrap.js"></script>
<script>
    //1. 发送验证码按钮的单击事件
    function send() {
        //1. 获取邮箱输入框中的数据
        let email = document.getElementById("email").value;
        //2. 将这个email发送到后台(controller)
        $.get('/dev/user/sendCode?email=' + email, function (res) {
            // 3.获取 email 错误的 span 标签对象
            let email_span = document.getElementById("email_span");
            if (res.code === '500') {
                // 显示 span
                email_span.style.display = 'block';
            } else {
                // 隐藏 span
                email_span.style.display = 'none';
                alert('邮箱发送成功！');
            }
        });
    }

    //2. 登录按钮
    function login() {
        //1.email和code分别获取一下
        let email = document.getElementById("email").value;
        let code = document.getElementById("code").value;
        //2.传参
        $.post('/dev/user/login', {"email": email, "code": code}, function (res) {
            // 3.获取 email 错误的 span 标签对象
            // let email_expired = document.getElementById("email_expired");
            if (res.code === '200') {
                // email_expired.display = 'none';
                //获取server返回过来的token
                let token = res.data;
                //存储到本地存储中 - 判断是否属于登录状态
                localStorage.setItem("token", token);
                window.location = 'index.html';
            } else if (res.code === '505') {
                // email_expired.display = 'block';
                alert(res.msg);
            }
        })
    }

</script>

</body>
</html>